<template>
  <div class="synergy-talent">
    <el-card class="elcard2" style="margin-bottom:20px;">
    <!-- 人才检索 -->
      <div class="search-box">
        <div class="search-box-p">
          <span class="tit">人才姓名：</span>
          <el-input v-model="searchParams.name" class="search-bar" placeholder="请输入人才名称" @keyup.enter.native="search"></el-input>
        </div>
        <div class="search-box-p">
          <span class="tit">公司名：</span>
          <el-autocomplete
            class="search-bar"
            popper-class="complete-list"
            v-model="searchParams.company"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入公司名称"
            placement="bottom"
            :debounce="300"
            :popper-append-to-body="false"
            :trigger-on-focus="false"
            @select="search"
            @keyup.enter.native="search"
          ></el-autocomplete>
          <!-- <el-input v-model="searchParams.company" class="search-bar" placeholder="请输入公司名称" @keyup.enter.native="search"></el-input> -->
        </div>
        <div class="search-box-p">
          <span class="tit">专利号：</span>
          <el-input v-model="searchParams.pn" class="search-bar" placeholder="请输入专利号" @keyup.enter.native="search"></el-input>
        </div>
        <div class="search-box-p">
          <span class="tit">时间范围：</span>
          <div class="search-time">
            <el-date-picker
              v-model="searchParams.start"
              size="medium"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              :clearable="true"
              :picker-options="pickerStart"
              class="eldatepicker">
            </el-date-picker>
            <span class="split">-</span>
            <el-date-picker
              v-model="searchParams.end"
              size="medium"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              :clearable="true"
              :picker-options="pickerEnd"
              class="eldatepicker">
            </el-date-picker>
          </div>
        </div>
        <div class="search-box-p">
          <span class="tit">领&nbsp;&nbsp;域：</span>
          <el-cascader
            ref="cascaderAddr"
            @change="search"
            :props="cascaderProps"
            v-model="searchParams.partyOrganId"
            style="width:200px;margin-left:80px"
          ></el-cascader>
        </div>
        <div class="search-box-p">
          <span class="tit">地&nbsp;&nbsp;区：</span>
          <el-select v-model="searchParams.area" placeholder="请选择" class="elselect" @change="search">
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in areaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-btn">
        <el-button class="elbtn" @click="search" type="primary">查询</el-button>
      </div>
    </el-card>
    <!--  -->
    <el-card :body-style="{'padding':'0'}" class="elcard">
      <ul v-if="listData.length>0" class="list-box">
        <li v-for="(item, index) in listData" :key="index">
          <div class="logo-box">
            <img width="100%" height="100%" src="../../../../assets/img/default-user.png" alt="">
            <!-- <img width="100%" height="100%" v-if="item.avatar !== ''" :src="item.avatar" alt="">
            <img width="100%" height="100%" v-else src="../../../../assets/img/default-user.png" alt=""> -->
          </div>
          <h2 class="name" @click="goDetail(item)">{{item.name}}</h2>
          <p class="info">
            <span>科研领域：<i>{{item.industry_label && item.industry_label.join(';')}}</i></span>
            <span>专利数量：<i class="patent-count" @click="handleShowPatentList(item)">{{item.count}}</i></span>
            <span>论文数量：<i>{{item.paperNum}}</i></span>
            <span>地址：<i>{{item.address || '暂无'}}</i></span>
          </p>
          <p class="info">
            <span>
              <em>科研星极：</em>
              <!-- <el-rate
                v-model.number ="item.researchStarv"
                text-color="#ff9900"
                disabled
                score-template="{item.researchStarv}"
                disabled-void-icon-class="el-icon-star-off"
                class="elrate">
              </el-rate> -->
              <el-rate
                v-model="item.researchStar"
                disabled
                text-color="#ff9900"
                disabled-void-icon-class="el-icon-star-off"
                class="elrate"
                >
              </el-rate>
            </span>
            <span><i></i></span>
            <span><i></i></span>
            <span>任职机构：<i>{{item.rel_org && item.rel_org.join(',')}}</i></span>
          </p>
        </li>
        
        <el-col :span="24" style="text-align:center;padding:10px; 0">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :current-page.sync="ipi"
            :page-size="ips"
            :total="total">
          </el-pagination>
        </el-col>
      </ul>
      <ul v-else class="no-data">
        <li>{{noData}}</li>
      </ul>
    </el-card>
    <v-dialog-pn ref="DialogPartentDetail"></v-dialog-pn>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import vDialogPn from '@/views/components/v-dialog-pn'
let jwt = require('jsonwebtoken')
let types = null
export default {
  data() {
    let that = this
    return {
      user: '',
      input:'',
      searchParams: {
        name: '',
        company: '',
        pn: '',
        area: '',
        start: '',
        end: '',
        partyOrganId: ['全部']
      },
      pickerStart: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.searchParams.end, 'gt')
        }
      },
      pickerEnd: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.searchParams.start, 'lt')
        }
      },
      cascaderProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level == 0) {
              axios({
                method: "post", //请求方式
                url: that.$Url.company.labelChild, //请求地址
                data: {
                  code: "0"
                }
              })
                .then(res => {
                  const areas = res.data.data.map((value, i) => ({
                    value: value.industryCode,
                    label: value.industryName,
                    leaf: node.level >= 3
                  }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  areas.unshift({
                    value: '全部',
                    label: "全部",
                    leaf: node.level >= 0
                  });
                  resolve(areas);
                })
                .catch(err => {
                  console.log(err);
                });
            }
            if (node.level == 1) {
              axios({
                method: "post", //请求方式
                url: that.$Url.company.labelChild, //请求地址
                data: {
                  code: node.value
                }
              })
                .then(res => {
                  const areas = res.data.data.map((value, i) => ({
                    value: value.industryCode,
                    label: value.industryName,
                    leaf: node.level >= 3
                  }));
                  
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(areas);
                })
                .catch(err => {
                  console.log(err);
                });
            } else if (node.level == 2) {
              axios({
                method: "post", //请求方式
                url: that.$Url.company.labelChild, //请求地址
                data: {
                  code: node.value
                }
              })
                .then(res => {
                  const areas = res.data.data.map((value, i) => ({
                    value: value.industryCode,
                    label: value.industryName,
                    leaf: node.level >= 3
                  }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(areas);
                })
                .catch(err => {
                  console.log(err);
                });
            } else if (node.level == 3) {
              axios({
                method: "post", //请求方式
                url: that.$Url.company.labelChild, //请求地址
                data: {
                  code: node.value
                }
              })
                .then(res => {
                  // console.log(res)
                  const areas = res.data.data.map((value, i) => ({
                    value: value.industryCode,
                    label: value.industryName,
                    leaf: node.level >= 3
                  }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(areas);
                })
                .catch(err => {
                  console.log(err);
                });
            }
          }, 0)
        }
      },
      areaOptions: [],
      listData: [],
      listAllData: [],
      ips: 10,
      total: 0,
      ipi: 1,
      noData: '数据加载中...'
    }
  },
  components: {
    vDialogPn
  },
  computed:{
    ...mapState(['levelCode','levelName'])
  },
  methods: {
    // 搜索
    search() {
      this.ipi = 1
      this.listData = []
      this.total = 0
      this.noData = '数据加载中...'
      let searchParams = JSON.parse(JSON.stringify(this.searchParams))
      let codeArr = JSON.parse(JSON.stringify(this.searchParams.partyOrganId))
      let code = codeArr[codeArr.length - 1]
      if (code === '全部') {
        code = ''
      }
      searchParams['code'] = code
      delete searchParams['partyOrganId']
      this.$post(this.$Url.production.personnelSearch, {
        ...searchParams,
        user: this.user,
        _size: 100
      }).then(res => {
        let data = res.data || []
        this.listAllData = data
        this.total = data.length
        if (this.total <=0) {
          this.noData = '暂无数据'
        }
        this.listData = this.listAllData.slice((this.ipi - 1) * this.ips, this.ipi * this.ips)
      }).catch(err => {})
    },
    // 地区
    areaSelect() {
      this.$post(this.$Url.patent.regionInfo, {
        supId: "000000" // 根据上级ID查询所属下级机构，最顶级criCode是 000000  苏州320000
      }).then(res => {
        if (res.data) {
          this.areaOptions = []
          res.data.forEach(i => {
            this.areaOptions.push({
              value: i.criCode,
              label: i.criName
            })
          })
          // this.searchParams['area'] = this.levelName
          this.search()
        }
      }).catch(e => {
        console.log(e);
      })
    },
    disabledDate(time, otherTime, type) {
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let otherTimeArr = otherTime.split('-')
      let otherYear = Number(otherTimeArr[0])
      let otherMonth = Number(otherTimeArr[1])
      let otherDate = Number(otherTimeArr[2])

      if (type === 'gt') {
        if (year >= otherYear && month >= otherMonth && date > otherDate) {
          return true
        }
        return false
      } else if (type === 'lt') {
        if (year <= otherYear && month <= otherMonth && date < otherDate) {
          return true
        }
        return false
      }
    },
    //模糊查询
    querySearchAsync(queryString, cb) {
      let ths = this;
      let querySearchList = []
      this.$get(this.$Url.production.personnelCompanySuggest, {
        company: queryString,
        user: this.user,
      }).then(res => {
        let list = res.data ? res.data : []
        list.forEach(v => {
          querySearchList.push({ value: v })
        })
        cb(querySearchList)
      });
    },
    // 展示专利列表
    handleShowPatentList(item) {
      let patentList = item.patent_list || []
      patentList.forEach(v => {
        v.title = v.ttl
      })
      this.$refs.DialogPartentDetail.init(patentList)
    },
    // 分页
    handleCurrentChange(val){
      this.ipi = val
      this.listData = this.listAllData.slice((this.ipi - 1) * this.ips, this.ipi * this.ips)
    },
    // 进入详情页
    goDetail(item){
      this.$router.push({
        name: 'SynergyTalentDetails',
        query: {
          name: item.name,
          id: item.pid,
          area: item.area,
          count: item.count,
          personOrAgency: (item.personOrAgency && item.personOrAgency.join('；')) || '',
          rel_org: JSON.stringify(item.rel_org),
        }
      })
      // let url = this.$router.resolve({
      //   name: 'SynergyTalentDetails',
      //   query: {
      //     name: item.name,
      //     id: item.id, // 'f6f38058-6725-11ea-8dbd-a7dbe7e5dc8a', // item.id,
      //     rel_org: JSON.stringify(item.rel_org),
      //     // area: arr,
      //     count: item.count, // (item.personOrAgency && item.personOrAgency.join('；')) || ''
      //     // personOrAgency: str
      //   }
      // })
      // window.open(url.href, '_blank')
    },
  },
  mounted() {
    let token = this.$cookie.get("token")
    this.user = jwt.decode(token).sub
    this.areaSelect()
  },
}
</script>

<style lang="scss" scoped>
.elcard2 {
  overflow: initial;
  .search-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    .search-box-p {
      position: relative;
      width: 50%;
      margin-bottom: 10px;
      text-align: left;
      .tit {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 80px;
        line-height: 36px;
      }
      .search-bar {
        position: relative;
        display: inline-block;
        width: 100%;
        padding-left: 80px;
        padding-right: 20px;
        box-sizing: border-box;
        margin-left: 0;
      }
      .elselect {
        padding-left: 80px;
      }
      .search-time {
        padding-left: 80px;
        .eldatepicker {
          width: 150px;
        }
        .split {
          margin: 0 10px;
        }
      }
    }
  }
  .search-btn {
    margin-bottom: 10px;
    text-align: right;
    .elbtn {
      width: 100px;
    }
  }
}
.elcard {
  text-align: left;
}

.list-box {
  position: relative;
  list-style: none;
  li {
    position: relative;
    display: block;
    min-height: 140px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 140px;
    border-bottom: 1px solid #e5e7f0;
    .logo-box {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9e0ee;
      box-sizing: border-box;
    }
    h2 {
      width: 100%;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #4f515b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .info {
      display: flex;
      align-items: center;
      width: 80%;
      margin-top: 10px;
      span {
        flex: 1;
        font-size: 12px;
        color: #86899e;
        i {
          font-style: normal;
          color: #4f515b;
        }
        em {
          vertical-align: middle;
        }
      }
      .patent-count {
        cursor: pointer;
        &:hover {
          color: $mainColor;
        }
      }
      .elrate {
        display: inline-block;
      }
    }
  }
}
.no-data {
  list-style: none;
  li {
    padding: 20px;
  }
}
</style>